<template>
	<a-modal title="发货单详情" :width="1300" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-row>
					<a-col :span="24">
						<a-table ref="table" size="default" style="margin-bottom: 24px" :columns="columns"
							:data-source="tableDataSource" :pagination="false">

							<template slot="number" slot-scope="text, record">
								<a-input v-model="record.operationNumber" placeholder="请输入数量" />
							</template>

							<template slot="materialModelNumber" slot-scope="text, record">
								{{ record.material ? record.material.materialModelNumber : '' }}
							</template>
							<!-- <span slot="image" slot-scope="text">
								<image-preview :images="text" />
							</span> -->
							<span slot="image" slot-scope="text,record">
								<image-preview1 :images="text" :imageUrl="record.imageUrl" />
							</span>
							<!-- <span slot="file" slot-scope="text">
								<image-preview :images="text" />
							</span> -->
							<span slot="file" slot-scope="text,record">
								<image-preview1 :images="text" :imageUrl="record.imageUrl" />
							</span>
							<template slot="markAbnormal" slot-scope="text, record">
								<a-switch v-if="!isNotHandled(record)" :defaultChecked="text == 1" :disabled="true"
									checked-children="异常" un-checked-children="正常" class="scoped-switch" />
							</template>

						</a-table>
					</a-col>

					<a-col :span="24">
						<a-form-item label="备注" :labelCol="labelColBlock" :wrapperCol="wrapperColBlock" has-feedback="">
							<a-input placeholder="请输入备注" v-decorator="['remark', { rules: [{ required: false, message: '请输入备注！' }] }]"
								:disabled="true" />
						</a-form-item>
					</a-col>

					<a-col :span="24">
						<a-form-item label="上传凭证" :labelCol="labelColBlock" :wrapperCol="wrapperColBlock" has-feedback="">
							<a-input placeholder="请输入上传凭证"
								v-decorator="['file', { rules: [{ required: true, message: '请输入上传凭证！' }] }]" v-show="false" />
							<fc-upload :file-list="fileList" :disabled="true" />
						</a-form-item>
					</a-col>

				</a-row>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { addAllType, addSimple, page, listDetail } from '@/api/modular/main/emsorder/emsOrderManage'
import { sysDictDataSupplierList } from '@/api/modular/main/emssysdictdata/emsDictDataManage'
import FcUpload from '@/components/FCUpload/FcUpload'
import { STable } from '@/components'
import { ORDER_TYPE_ENUM } from '@/utils/util'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
	components: { FcUpload, STable },
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 2 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 20 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			fileList: [],
			orders: [],
			tableDataSource: [],
			ordersResult: [],
			orderMaterials: [],
			orgIdSupplier: 'all',
			supplierList: [],
			columns: [
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '物料',
					dataIndex: 'materialName',
					ellipsis: true,
				},
				{
					title: '料号',
					dataIndex: 'materialCode',
					// ellipsis: true,
					width: '220px'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber',
					scopedSlots: { customRender: 'materialModelNumber' }
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '发货单号',
					dataIndex: 'orderNumber',
					// ellipsis: true,
					width: '220px'
				},
				{
					title: '供应商发货数量',
					dataIndex: 'number',
					// scopedSlots: {customRender: 'number'}
				},
				{
					key: 'actualNumber',
					title: '实收数量',
					dataIndex: 'completedNumber',
					customRender: (text, record, index) => {
						return this.isNotHandled(record) ? '尚未入库' : record.completedNumber
					}
				},
				{
					title: '是否异常',
					dataIndex: 'markAbnormal',
					scopedSlots: { customRender: 'markAbnormal' }
				},
				{
					title: '入库图片',
					dataIndex: 'file',
					scopedSlots: { customRender: 'file' }
				},
			],
			emsOrder: null,
		}
	},
	methods: {
		fcsuccess(url) {
			this.form.setFieldsValue({ image: url })
		},
		show(record) {
			// record 是发货单Bean
			let {
				orderId,
			} = record

			this.visible = true
			this.emsOrder = record
			if (record.file) {
				this.fileList = record.file.split(',').map(fileID => {
					return {
						uid: fileID,
						name: fileID,
						status: 'done',
						url: this.$util.formatImageUrl(fileID),
						fileID: fileID
					}
				})
			}

			// 还要调接口查发货单的物料
			// 设定订单类型
			setTimeout(() => {
				this.loadData()
			}, 100)
		},
		loadData: function () {
			let orderId = this.emsOrder.orderId
			this.confirmLoading = true
			listDetail({ orderIds: orderId }).then(res => {
				let orders = res.data
				this.orders = orders
				let oms = []
				for (const order of orders) {
					if (!order.orderMaterials) {
						continue
					}
					let _oms = order.orderMaterials.map(om => {
						let { number, completedNumber } = om
						let operationNumber = number
						return Object.assign({ orderNumber: order.orderNumber, operationNumber }, om)
					})
					oms = oms.concat(_oms)
				}
				this.tableDataSource = oms
			}).finally(() => {
				this.confirmLoading = false
			})
		},
		handleSubmit() {
		},
		handleCancel() {
			this.form.resetFields()
			this.tableDataSource = []
			this.fileList = []
			this.visible = false
		},
		isNotHandled(record) {
			return record.completedNumber == 0 && record.markAbnormal == 0
		}
	},
}
</script>
<style scoped>
.scoped-switch.ant-switch {
	background-color: #1890FF !important;
}

.scoped-switch.ant-switch-checked {
	background-color: #ff4d4f !important;
}
</style>
